<template>
  <div>
    <Card>
      <div class="ally-search margin-bottom-10">
        <Row>
          <Col span="6">
            <label>盟友ID: </label>
            <Input id="searchAllyId" v-model="search.allyId" placeholder="盟友ID" style="width: 200px"/>
          </Col>
          <Col span="6">
            <label>盟友名称: </label>
            <Input v-model="search.allyName" placeholder="盟友名称" style="width: 200px"/>
          </Col>
          <Col span="6">
            <label>模板名称: </label>
            <Input v-model="search.templateName" placeholder="模板名称" style="width: 200px"/>
          </Col>
          <Col span="6">
            <Button type="success" icon="ios-search" @click="handleSearch">查询</Button>
            <Button type="info" icon="md-add" @click="handleCreate">新增</Button>
          </Col>
        </Row>
      </div>
      <div class="ally-list">
        <Table border :loading="content.loading" :columns="content.columns" :data="content.data"></Table>
      </div>

      <!-- 新增修改 -->
      <Drawer
        title="新增盟友"
        v-model="create.show"
        width="720"
        :mask-closable="false"
        :styles="styles">
        <Form :model="create.ally" style="margin-right: 30px">
          <FormItem label="盟友ID: " label-position="left" :label-width="80">
            <Input v-model="create.ally.allyId" placeholder="请输入盟友ID"/>
          </FormItem>
          <FormItem label="盟友名称: " label-position="left" :label-width="80">
            <Input v-model="create.ally.name" placeholder="请输入盟友名称"/>
          </FormItem>
          <FormItem label="手机号: " label-position="left" :label-width="80">
            <Input v-model="create.ally.phone" placeholder="请输入手机号"/>
          </FormItem>
          <FormItem label="微信号: " label-position="left" :label-width="80">
            <Input v-model="create.ally.wechat" placeholder="请输入微信号"/>
          </FormItem>
          <FormItem label="QQ号: " label-position="left" :label-width="80">
            <Input v-model="create.ally.qq" placeholder="请输入QQ号"/>
          </FormItem>
          <FormItem label="邮箱: " label-position="left" :label-width="80">
            <Input v-model="create.ally.email" placeholder="请输入邮箱"/>
          </FormItem>
          <FormItem label="模板: " label-position="left" :label-width="80">
            <Select v-model="create.ally.templateId" placeholder="请选择模板">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="城市: " label-position="left" :label-width="80">
            <ProvinceCity/>
          </FormItem>
          <FormItem label="详细地址: " label-position="left" :label-width="80">
            <Input v-model="create.ally.address" placeholder="请输入详细地址"/>
          </FormItem>
          <FormItem label="备注: " label-position="left" :label-width="80">
            <Input v-model="create.ally.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}"/>
          </FormItem>
        </Form>
      </Drawer>

    </Card>
  </div>
</template>

<script>
import { post } from '../../libs/axios-cfg'
import ProvinceCity from '../main/components/province-city/province-city'

export default {
  components: { ProvinceCity },
  data () {
    return {
      search: {
        allyId: null,
        allyName: null,
        templateName: null
      },
      content: {
        loading: false,
        columns: [
          {
            title: 'ID',
            key: 'id'
          },
          {
            title: '盟友ID',
            key: 'allyId'
          },
          {
            title: '盟友名称',
            key: 'allyName'
          },
          {
            title: '所在城市',
            key: 'city'
          },
          {
            title: '模板',
            key: 'template'
          },
          {
            title: '备注',
            key: 'remark'
          },
          {
            title: '操作',
            key: 'action',
            width: 350,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '查看详情'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '编辑修改'),
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '品牌管理'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '版本管理')
              ])
            }
          }
        ],
        data: []
      },
      create: {
        show: false,
        ally: {
          allyId: null,
          name: null,
          phone: null,
          wechat: null,
          qq: null,
          email: null,
          templateId: null,
          cityId: null,
          address: null,
          remark: null
        }
      },
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      }
    }
  },
  created () {
    this.queryAllyInfo()
  },
  methods: {
    handleSearch () {
      this.queryAllyInfo()
    },
    handleCreate () {
      this.create.show = true
    },
    async queryAllyInfo () {
      this.content.loading = true
      try {
        let res = await post('/api/tvpush/ally/list', this.search)
        this.content.data = res.data.records
      } catch (error) {
        this.$throw(error)
      }
      this.content.loading = false
    }
  }
}
</script>

<style scoped>

</style>
